{extends 'admin/layout/table-main.tpl'}

{block title}产品管理{/block}
{block smallTitle}系统内的产品管理。{/block}
{block head}
	<script type="text/javascript" charset="utf-8" src="{asset('admin/ueditor/ueditor.config.js')}"></script>
	<script type="text/javascript" charset="utf-8" src="{asset('admin/ueditor/ueditor.all.min.js')}"> </script>
	<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
	<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
	<script type="text/javascript" charset="utf-8" src="{asset('admin/ueditor/lang/zh-cn/zh-cn.js')}"></script>
{/block}
{block main}
<div class="row" xmlns="http://www.w3.org/1999/html">
	<div class="col-sm-12">
		<div class="ibox float-e-margins">
			<div class="ibox-title">
				<h5>产品管理 <small>后台产品编辑</small></h5>
			</div>
			<div class="ibox-content">
				<form method="post" class="form-horizontal" action="{route('AdminGoodsEditAction')}">
					{if $data}
					<div class="form-group">
						<label class="col-sm-2 control-label">产品id</label>
						<div class="col-sm-10">
							<p class="form-control-static">{$data.id}</p>
						</div>
					</div>
					{/if}
					<div class="form-group">
						<label class="col-sm-2 control-label">产品名</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" name="name" value="{Input::old('name')|default:$data.name}">
						</div>
					</div>
					<div class="hr-line-dashed"></div>
					<div class="form-group">
						<label class="col-sm-2 control-label">产品货号</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" name="goods_number" value="{Input::old('goods_number')|default:$data.goods_number}">
						</div>
					</div>
					<div class="hr-line-dashed"></div>
					<div class="form-group">
						<label class="col-sm-2 col-sm-2 control-label">封面图片</label>
						<div class="col-sm-10">
							<div class="fileupload fileupload-new" data-provides="fileupload"
								 id="upload_picture">
								<input type="hidden" name="cover_id"
									   value="{Input::old('cover_id')|default:$data.cover_id}" />
								<div class="fileupload-new thumbnail"
									 style="width: 120px; height: 120px;">
									{if $data.cover_id}<img
										src="{route('FilePull', ['id'=>$data.cover_id])}">{else}<img
											src="http://www.placehold.it/150x150/EFEFEF/AAAAAA&amp;text=no+image"
											alt="" />{/if}
								</div>
								<div class="fileupload-preview fileupload-exists thumbnail"
									 style="max-width: 120px; max-height: 120px; line-height: 20px;"></div>
								<div class="actions">
									<span class="btn btn-file"><button class="btn btn-default fileupload-new" type="button"><i class="fa fa-cloud-upload"></i>选择图片</button>
										<span class="fileupload-exists">更改图片</span>
										 <input type="file" class="default upload_pic" /> </span>
									<a href="#" class="btn close" data-dismiss="fileupload" style="display: none;">删除</a>
								</div>
							</div>
							<span class="label label-danger">注意</span> <span>图片上传只支持最新的Firefox、Chrome、Opera、Safari和Internet
								Explorer 10 以上版本的浏览器。</span>
						</div>
					</div>
					<div class="hr-line-dashed"></div>
					<div class="form-group">
						<label class="col-sm-2 col-sm-2 control-label">首页推荐封面图片</label>
						<div class="col-sm-10">
							<div class="fileupload fileupload-new" data-provides="fileupload"
								 id="index_cover_id">
								<input type="hidden" name="index_cover_id"
									   value="{Input::old('index_cover_id')|default:$data.coverindex_cover_id_id}" />
								<div class="fileupload-new thumbnail"
									 style="width: 120px; height: 120px;">
									{if $data.index_cover_id}<img
										src="{route('FilePull', ['id'=>$data.index_cover_id])}">{else}<img
											src="http://www.placehold.it/150x150/EFEFEF/AAAAAA&amp;text=no+image"
											alt="" />{/if}
								</div>
								<div class="fileupload-preview fileupload-exists thumbnail"
									 style="max-width: 120px; max-height: 120px; line-height: 20px;"></div>
								<div class="actions">
									<span class="btn btn-file"><button class="btn btn-default fileupload-new" type="button"><i class="fa fa-cloud-upload"></i>选择图片</button>
										<span class="fileupload-exists">更改图片</span>
										 <input type="file" class="default upload_pic" /> </span>
									<a href="#" class="btn close" data-dismiss="fileupload" style="display: none;">删除</a>
								</div>
							</div>
							<span class="label label-danger">注意</span> <span>图片上传只支持最新的Firefox、Chrome、Opera、Safari和Internet
								Explorer 10 以上版本的浏览器。</span>
						</div>
					</div>
					<div class="hr-line-dashed"></div>
					<div class="form-group">
						<label class="col-sm-2 control-label">原价</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" name="original_price" value="{Input::old('original_price')|default:$data.original_price}">
						</div>
					</div>
					<div class="hr-line-dashed"></div>
					<div class="form-group">
						<label class="col-sm-2 control-label">现价</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" name="present_price" value="{Input::old('present_price')|default:$data.present_price}">
						</div>
					</div>
					<div class="hr-line-dashed"></div>
					<div class="form-group">
						<label class="col-sm-2 control-label">折扣时间</label>
						<div class="col-sm-10">
							<input type="text" id="start_at" name="start_at" value="{Input::old('discount_star_at')|default:$data.discount_star_at}" class="m-wrap date-range" onclick="WdatePicker({ dateFmt:'yyyy-MM-dd',maxDate:'#F{ $dp.$D(\'end_at\')}'})" value="2015-10-28">
							-
							<input type="text" id="end_at" name="end_at" value="{Input::old('discount_end_at')|default:$data.discount_end_at}" onclick="WdatePicker({ dateFmt:'yyyy-MM-dd',minDate:'#F{ $dp.$D(\'start_at\')}'})" value="2015-10-28" class="m-wrap date-range">
						</div>
					</div>
					<div class="hr-line-dashed"></div>
					{if !$data}
					<div class="form-group">
						<label class="col-sm-2 control-label">产品附加属性1</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" name="attribute[]" value="">
							<input type="hidden" class="form-control" name="attribute_id[]" value="">
							<span>比如颜色 “color#选择颜色#黑色#白色#红色” 选择颜色 显示在左边 的文字 其他是右边选择的属性</span>
						</div>
					</div>
					<div class="hr-line-dashed"></div>
					<div class="form-group">
						<label class="col-sm-2 control-label">产品附加属性2</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" name="attribute[]" value="">
							<input type="hidden" class="form-control" name="attribute_id[]" value="">
							<span>比如尺寸 “size#选择尺寸#L码#XL码#XXL码” 无附加属性，请保留为空</span>
						</div>
					</div>
					<div class="hr-line-dashed"></div>
					{else}
						{foreach $data.goods_attribute as $key=>$item}
							<div class="form-group">
								<label class="col-sm-2 control-label">产品附加属性{$key+1}</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" name="attribute[]" value="{$item.value}">
									<input type="hidden" class="form-control" name="attribute_id[]" value="{$item.id}">
									<span>无附加属性，请保留为空</span>
								</div>
							</div>
							<div class="hr-line-dashed"></div>
						{/foreach}
					{/if}
					<div class="form-group">
						<label class="col-sm-2 col-sm-2 control-label">是否单品</label>
						<div class="col-sm-10">
							<select class="form-control m-b-10" name="is_item">
								{foreach $is_item as $key=>$item}
									<option value="{$key}" {if $data.is_item==$key && $data}selected="selected"{/if}>{$item}</option>
								{/foreach}
							</select>
						</div>
					</div>
					<div class="hr-line-dashed"></div>
					<div class="form-group">
						<label class="col-sm-2 col-sm-2 control-label">状态</label>
						<div class="col-sm-10">
							<select class="form-control m-b-10" name="status">
								{foreach $status as $key=>$item}
									<option value="{$key}" {if $data.status==$key && $data}selected="selected"{/if}>{$item}</option>
								{/foreach}
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 col-sm-2 control-label">是否首页展示</label>
						<div class="col-sm-10">
							<select class="form-control m-b-10" name="is_index">
								<option value="" >请选择</option>
								{foreach $is_index as $key=>$item}
									<option value="{$key}" {if $data.is_index==$key && $data}selected="selected"{/if}>{$item}</option>
								{/foreach}
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 col-sm-2 control-label">首页展示位置</label>
						<div class="col-sm-10">
							<select class="form-control m-b-10" name="show_place">
								<option value="" >请选择</option>
								{foreach $show_place as $key=>$item}
									<option value="{$key}" {if $data.show_place==$key && $data}selected="selected"{/if}>{$item}</option>
								{/foreach}
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 col-sm-2 control-label">是否首页推荐</label>
						<div class="col-sm-10">
							<select class="form-control m-b-10" name="top_recommended">
								<option value="" >请选择</option>
								{foreach $top_recommended as $key=>$item}
									<option value="{$key}" {if $data.top_recommended==$key && $data}selected="selected"{/if}>{$item}</option>
								{/foreach}
							</select>
						</div>
					</div>
					<div class="hr-line-dashed"></div>
					<div class="form-group">
						<label class="col-sm-2 col-sm-2 control-label">排序</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" name="sort_at" value="{Input::old('sort_at')|default:$data.sort_at|escape}">
						</div>
					</div>
					<div class="hr-line-dashed"></div>
					<div class="form-group">
						<label class="col-sm-2 control-label">产品介绍</label>
						<div class="col-sm-10">
							{*<textarea name="details" class="form-control ckeditor" id="TextArea1" cols="30" rows="10" style='width: 700px; height: 200px; visibility: hidden;'>{Input::old('details', $data.details)|escape}</textarea>*}
							<textarea id="editor" type="text/html" style="width:100%;height:500px;" name="details"> {Input::old('details', $data.details)|escape} </textarea>
							<span></span>
						</div>
					</div>
					<div class="hr-line-dashed"></div>
					<div class="form-group" id="container">
						<label class="col-sm-2 col-sm-2 control-label">产品轮播图</label>

						<div class="col-sm-10">
							<a href="javascript:;" class="btn mini green" id="J_selectImage">上传图片</a>
							<span class="help-inline">*</span>
						</div>
					</div>
					<div class="hr-line-dashed"></div>
					<div id="pictures_div">
						{foreach $data.pictures as $item}
							<div id="pictures_row_{$item.id}">
								<div class="form-group">
									<label class="col-sm-2 col-sm-2 control-label">图片</label>
									<div class="col-sm-10">
										<img src="{$item.picture.url}&width=100&height=100"/>
										<input type="hidden" name="picture_id[]" value="{$item.picture_id}"/>
										<span class="label label-danger"></span>
									</div>
								</div>

								<div class="form-group">
									<label class="col-sm-2 col-sm-2 control-label">排序</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" name="pic_sort_at[]" value="{Input::old('sort_at')|default:$item.sort_at|escape}">
									</div>
								</div>
								<input type="hidden" name="picture_list_id[]" value="{$item.id}"/>
								<div class="form-group">
									<label class="col-sm-2 col-sm-2 control-label">
										<button type="button" class="btn" onclick="if (confirm('确定删除吗？')){ del('{$item.id}') }">
											<i class=" icon-remove"></i>删除</button>
									</label>
								</div>
							</div>
						{/foreach}
					</div>
					<div class="hr-line-dashed"></div>
					<div class="form-group">
						<div class="col-sm-4 col-sm-offset-2">
							<input type="hidden" class="form-control" name="id" value="{$data.id}">
							<button class="btn btn-primary" type="submit">保存内容</button>
							<a class="btn btn-white" type="button" href="{route('AdminGoodsList')}">返回</a>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
{/block}
{block script}
	<script type="text/javascript">
		function del_fill(e){
			$("#pic_fill_"+e).remove();
		}

		function del(e){
			$.ajax({
				type        : 'POST',
				url         : '{route('AdminGoodsDeletePicture')}',
				data        : 'id='+e,
				dataType    :'json',
				success     : function(result){
					if(result.status == 200){
						alert(result.message);
						$('#pictures_row_'+e).remove();
					}else{
						alert('删除失败');
					}
				}
			});
		}

		//实例化编辑器
		//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
		var ue = UE.getEditor('editor');
//		ue.textarea = 'details';
	</script>

	<link href="{asset('admin/css/bootstrap-fileupload.min.css')}" rel="stylesheet" type="text/css" />
	<script src="{asset('admin/js/bootstrap-fileupload.min.js')}" type="text/javascript" ></script>
	<script>

		// 文件上传。
		$.fn.eduFileUpload = function(options){
			options = $.extend({
				name : null
			}, options || { });
			function formatSize(size) {
				var unit = ['B', 'KB', 'MB', 'GB', 'TB', 'DB'];
				var i = arguments[1];
				if (typeof arguments[1] == 'undefined') {
					i = 0;
				}
				if (size < 1024) {
					return size.toFixed(2)+unit[i];
				} else {
					return formatSize(size/1024, ++i);
				}
			}
			this.each(function() {
				var $this = $(this);
				var xhr_before = null;

				var $statistics = $('<span class="statistics" style="display: none;">\
                <span class="loaded">0M</span> /\
                <span class="file_size">0M</span>\
                <span class="upload_progress">0%</span>\
            </span>').appendTo($this);

				var $file = $this.find(':file:first');
				var $input = options.name ? $this.find('input[type="hidden"][name="' + options.name + '"]') : $this.find('input[type="hidden"]:first');

				$this.find('.close').on('click', function(){
					$file.val('');
					$input.val('');
					if (xhr_before){
						xhr_before.abort();
						xhr_before = null;
					}
					$this.data('uploading', false);
				});

				$this.data('uploading', false);
				$file.on('change', function(){
					if( ! this.files[0]) return;
					$this.data('uploading', true);
					var data = new FormData();
					data.append('body', this.files[0]);
					$.ajax({
						type        : 'POST',
						url         : '{route('FileUpload')}',
						data        : data,
						processData : false,
						contentType : false,
						beforeSend  : function(xhr){
							if (xhr_before) xhr_before.abort();
							xhr_before = xhr;
							xhr.progress = function(e) {
								if (e.lengthComputable) {
									var percentComplete = Math.round(e.loaded * 100 / e.total);
									$statistics.find('.upload_progress').html(percentComplete+'%');
									$statistics.find('.loaded').html(formatSize(e.loaded));
								} else {
									$statistics.find('.loaded').html('上传中');
									$statistics.find('.upload_progress').html('');
								}
							};
						},
						success     : function(json){
							xhr_before = null;
							$this.data('uploading', false);
							if(json.mime.substring(0,6) == 'image/'){
								$input.val(json.file_id);
							}else{
								$input.val('');
								$this.find('.close').trigger('click');
								ialert('不支持的图片格式。');
							}
						},
						error       : function (xhr) {
							var message = xhr.responseText;
							xhr_before = null;
							$this.data('uploading', false);
							$this.find('.close').trigger('click');
						}
					});
				});
			});
		};

		$('#upload_picture').eduFileUpload({ name : 'cover_id' });
		$('#index_cover_id').eduFileUpload({ name : 'index_cover_id' });
	</script>
	<script type="text/javascript" src="{asset('admin/plupload/js/plupload.full.min.js')}"></script>
	<script type="text/javascript">
		// Custom example logic

		var uploader = new plupload.Uploader({
			runtimes : 'html5,flash,silverlight,html4',
			browse_button : 'J_selectImage', // you can pass an id...
			container: document.getElementById('container'), // ... or DOM Element itself
			url : '{route('PluploadFilePull')}',
			flash_swf_url : '{asset('admin/plupload/js/Moxie.swf')}',
			silverlight_xap_url : '{asset('admin/plupload/js/Moxie.xap')}',

			filters : {
				max_file_size : '10mb',
				mime_types: [
					{ title : "Image files", extensions : "jpg,gif,png" },
					{ title : "Zip files", extensions : "zip" }
				]
			},

			init: {
				FilesAdded: function(up, files) {
					uploader.start();
				},
				Error: function(up, err) {
					document.getElementById('console').appendChild(document.createTextNode("\nError #" + err.code + ": " + err.message));
				},

				FileUploaded:function (up,file,info) {
					console.log(info);
					console.log(file);
					var jsonstr = eval("(" + info.response + ")");
					console.log(jsonstr);
					var id = jsonstr.id;
					var url = jsonstr.url;
					var div = '';
					div += '<div id="pic_fill_'+file.id+'">';

					//div += '<div class="row-fluid profile-classic">';
					div += '<div class="form-group">';
					div += '<label class="col-sm-2 col-sm-2 control-label">图片</label>';
					div += '<div class="col-sm-10">';
					div += '<img src="'+url+'&width=100&height=100"/>';
					div += '<input type="hidden" name="picture_id[]" value="'+id+'"/>';
					div += '<\/div>';
					div += '<\/div>';

					div += '<div class="form-group">';
					div += '<label class="col-sm-2 col-sm-2 control-label">排序</label>';
					div += '<div class="col-sm-10">';
					div += '<input type="text" class="form-control" name="pic_sort_at[]" value="">';
					div += '<\/div>';
					div += '<\/div>';
					div += '<input type="hidden" name="picture_list_id[]" value="0"/>';
					//div += '<div class="row-fluid profile-classic">';
					div += '<div class="form-group">';
					div += '<label class="col-sm-2 col-sm-2 control-label">';
					div += '<button type="button" class="btn" onclick="if (confirm(\'确定删除吗？\')){ del_fill(\''+file.id+'\') }">';
					div += '<i class=" icon-remove"></i>删除</button>';
					div += '<\/label>';
					div += '<\/div>';

					div += '<\/div>'
					$('#pictures_div').append(div);
				}
			}
		});

		uploader.init();

	</script>
{/block}
